<template>
  <div class="banner">
    <div
      ref="swiperBox"
      v-if="bannerList.length > 0"
      v-swiper:swiper="swiperOption"
      class="swiper swiperBox"
    >
      <div class="swiper-wrapper">
        <a
          v-for="v in bannerList"
          :key="v.id"
          :style="{
            background: 'url(' + v.thumb + ') center center / cover no-repeat',
          }"
          class="swiper-slide"
          :href="v.link"
          target="_blank"
        >
          <!--  <span class="slideTitle" :title="v.remarks">{{ v.remarks || ' ' }}</span>-->
        </a>
      </div>
      <div slot="pagination" class="swiper-pagination"></div>
      <!-- <div class="swiper-button-prev" slot="button-prev"></div>-->
      <!-- <div class="swiper-button-next" slot="button-next"></div>-->
    </div>
  </div>
</template>

<script>

export default {
  props: ['banner'],
  watch: {
    banner(val) {
      this.bannerList = val;
    }
  },
  data () {
    return {
      bannerList: [],
      swiperOption: {
        loop: false,
        // notNextTick是一个组件自有属性，如果notNextTick设置为true，组件则不会通过NextTick来实例化swiper，也就意味着你可以在第一时间获取到swiper对象，假如你需要刚加载遍使用获取swiper对象来做什么事，那么这个属性一定要是true
        notNextTick: true,
        slidesPerView: 'auto',
        centeredSlides: true,
        pagination: {
          el: '.swiper-pagination',
          bulletClass: 'banner-bullet',
          clickable: true,
          renderBullet (index, className) {
            return `<span class="${className}"></span>`;
          },
        },
        // navigation: {
        // 	nextEl: '.swiper-button-next',
        // 	prevEl: '.swiper-button-prev',
        // },
        on: {
          slideChange () {
            // console.log('onSlideChangeEnd', this);
          },
          tap () {
            // console.log('onTap', this);
          }
        },
        autoplay: {
          delay: 6000,
          disableOnInteraction: false, // 触碰后不停止自动切换
        },
        // autoplay: false,
        // effect:'cube',
        mousewheel: false, // 滚轮控制
        preloadImages: false,
        lazy: true
      },
    }
  },
  swiper () {
    // 如果你需要得到当前的swiper对象来做一些事情，你可以像下面这样定义一个方法属性来获取当前的swiper对象，同时notNextTick必须为true
    return this.$refs.swiperBox.swiper
  },
  created () {
    this.bannerList = this.banner;
  },
  mounted () {
    // window.addEventListener('scroll', this.scrollHandle, true)
  },
  deactivated() {
    // window.removeEventListener('scroll', this.scrollHandle, true);
  },
  methods: {
    isElementInViewport (el, offset = 0) {
      const box = this.$refs.swiperBox.getBoundingClientRect()
      const top = (box.top >= 0)
      const left = (box.left >= 0)
      const bottom = (box.bottom <= (window.innerHeight || document.documentElement.clientHeight) + offset)
      const right = (box.right <= (window.innerWidth || document.documentElement.clientWidth) + offset)
      return (top && left && bottom && right)
    },
    scrollHandle (e) {
      console.log(this.isElementInViewport(e))
      // 进入可视区域
      // let offset = this.$refs.swiperBox.getBoundingClientRect();
      // console.log(offset)
      // let offsetTop = offset.top;
      // let offsetBottom = offset.bottom;
      // let offsetHeight = offset.height;
      // if (this.offsetTop <= innerHeight && this.offsetTop > -this.offsetHeight) {
      //   console.log('进入可视区域');
      //   // do something
      // } else {
      //   console.log('不在可视区域');
      //   // do something
      // }
    }
  }
}
</script>
<style lang="scss" scoped>
.banner {
  position: relative;
  height: 440px;
  width: 100%;
  min-width: $base-width;
  overflow: hidden;

  .swiper,
  .swiper-wrapper {
    height: 100%;
    width: 100%;

    .swiper-slide {
      position: relative;
      overflow: hidden;
      height: 100%;
      width: 100%;
      background: #ebebeb;

      img {
        position: absolute;
        width: 100%;
        left: 50%;
        top: 50%;
        transform: translate(-50%, -50%);
      }
    }
    .swiper-pagination {
      height: 30px;
      width: 100%;
      bottom: 0;
      z-index: 2;

      ::v-deep .banner-bullet {
        display: inline-block;
        height: 4px;
        width: 20px;
        background: #fff;
        border-radius: 2px;
        margin: 0 6px;
      }
      ::v-deep .swiper-pagination-bullet-active {
        background: $base-color;
      }
    }
  }
}
</style>
